<template>
  <div class="myList">
    <ul>
      <transition-group name="animate__animated animate__bounce" enter-active-class="animate__fadeInRightBig" leave-active-class="animate__fadeOutRight">
      <li v-for="item in todos" :key="item.id">
        <input
          type="checkbox"
          :checked="item.done"
          @change="handleChange(item.id)"
        /><span v-show="!item.isEdit">{{ item.title }}</span>
        <input
          type="text"
          v-show="item.isEdit"
          :value="item.title"
          @blur="cancelEdit(item, $event)"
          ref="fs"
        />
        <button @click="deletes(item.id)">删除</button>
        <button @click="edit(item)">编辑</button>
      </li>
      </transition-group>
    </ul>
  </div>
</template>
<script>
import 'animate.css'
export default {
  name: "myList",
  props: ["todos", "checkTodo", "deleteTodo"],
  methods: {
    handleChange(e) {
      this.checkTodo(e);
    },
    deletes(id) {
      if (confirm("确定删除你的任务清单吗")) {
        this.deleteTodo(id);
      }
    },
    edit(todos) {
      if (todos.hasOwnProperty("isEdit")) {
        todos.isEdit = true;
      } else {
        this.$set(todos, "isEdit", true);
      }
      // this.$nextTick(()=>{
      //   console.log(this);
      //   this.$refs.fs.focus()
      // })
    },
    cancelEdit(todos, e) {
      todos.isEdit = false;
      this.$bus.$emit("updateTodo", todos.id, e.target.value);
    },
  },
};
</script>
<style lang="less" scoped>
.myList {
  width: 600px;
  ul {
    text-align: left;
    padding-left: 0;
    li {
      width: 100%;
      height: 30px;
      border: 1px solid #eee;
      line-height: 30px;
      &:hover {
        background: #ccc;
        button {
          display: block;
        }
      }
      button {
        float: right;
        margin: 2px 2px 0 0;
        color: white;
        background: orangered;
        border: none;
        border-radius: 4px;
        width: 60px;
        height: 26px;
        cursor: pointer;
        display: none;
        &:last-child {
          background: skyblue;
        }
      }
    }
  }
}
</style>